<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>22001010431-曹鹏</title>
   
    <link rel="stylesheet" href="./css/caopeng.css">
    <link rel="stylesheet" href="./iconfonts/fonts/iconfont.css">
    <link rel="stylesheet" href="./css/TV-series.css">
    <link rel="stylesheet" href="./iconfonts/icon/fonts/iconfont.css">
   
</head>

<body>
    <header class="cao-nav">
        <div class="cao-nav-left">
            <span class="iconfont icon-tengxunshipin"></span>
            <span class="cao-ten">腾讯视频</span>
        </div>
        <form>
            <input type="text" value="猎罪图鉴2">
            <button type="submit" class="iconfont icon-sousuo" onclick="event.preventDefault(); doSearch();"></button>
        </form>
        <div class="cao-nav-right">
            <span class="iconfont icon-vip1"></span>
            <span class="iconfont icon-airudiantubiaohuizhi-zhuanqu_youxi"></span>
            <span class="iconfont icon-lishi"></span>
            <span class="iconfont icon-video"></span>
            <span class="iconfont icon-a-huaban1fuben10"></span>
            <img src="image/头像.png">
        </div>
    </header>
    <aside>
        <a href="#">
            <span class="iconfont icon-xingxing"></span>
            <span>首页</span>
        </a>
        <a href="#">
            <span class="iconfont icon-dianshi"></span>
            <span>电视剧</span>
        </a>
    </aside>
    <article>
        <p>&lt; 返回</p>
        <section class="cao-classify">
            <P>
                <span>最热</span>
                <a href="#">最新上架</a>
                <a href="#">高分好评</a>
            </P>
            <P>
                <span>出品</span>
                <a href="#">精品短剧</a>
                <a href="#">独播</a>
                <a href="#">腾讯出品</a>
            </P>
            <P>
                <span>类型</span>
                <a href="#">爱情</a>
                <a href="#">都市</a>
                <a href="#">青春</a>
                <a href="#">奇幻</a>
                <a href="#">武侠</a>
                <a href="#">古装</a>
                <a href="#">科幻</a>
                <a href="#">悬疑</a>
                <a href="#">恐怖</a>
                <a href="#">动作</a>
                <a href="#">战争</a>
                <a href="#">剧情</a>
                <a href="#">军旅</a>
                <a href="#">家庭</a>
                <a href="#">喜剧</a>
                <a href="#">权谋</a>
                <a href="#">现实</a>
            </P>
            <P>
                <span>资费</span>
                <a href="#">免费</a>
                <a href="#">限免</a>
                <a href="#">会员</a>
            </P>
            <P>
                <span>地区</span>
                <a href="#">内地</a>
                <a href="#">中国香港</a>
                <a href="#">中国台湾</a>
                <a href="#">中国澳门</a>
                <a href="#">日本</a>
                <a href="#">韩国</a>
                <a href="#">美国</a>
                <a href="#">英国</a>
                <a href="#">其他</a>
            </P>
            <P>
                <span>年份</span>
                <a href="#">即将上线</a>
                <a href="#">2024</a>
                <a href="#">2023</a>
                <a href="#">2022</a>
                <a href="#">2021</a>
                <a href="#">2020 - 2016</a>
                <a href="#">2015 - 2011</a>
                <a href="#">2010 - 2000</a>
                <a href="#">更早</a>
                <span class="cao-expand-trigger">展开</span>
            </P>
            <P class="cao-hidden-sections">
                <span>剧场</span>
                <a href="#">X剧场</a>
                <a href="#">板凳单元</a>
                <a href="#">萤火单元</a>
                <a href="#">十分剧场</a>
            </P>
            <P class="cao-hidden-sections">
                <span>奖项</span>
                <a href="#">白玉兰奖</a>
                <a href="#">飞天奖</a>
                <a href="#">金鹰奖</a>
            </P>
            <P class="cao-hidden-sections">
                <span>全部</span>
                <a href="#">漫画改编</a>
                <a href="#">英雄成长</a>
                <a href="#">契约恋爱</a>
                <a href="#">情报站</a>
                <a href="#">闪婚</a>
                <a href="#">家庭喜剧</a>
                <a href="#">正邪对抗</a>
                <a href="#">爱情喜剧</a>
                <a href="#">东方玄幻</a>
                <a href="#">轻喜剧</a>
                <a href="#">探寻真相</a>
                <a href="#">校园喜剧</a>
                <a href="#">校园爱情</a>
                <a href="#">女性题材</a>
                <a href="#">身份顶替</a>
                <a href="#">情感纠葛</a>
            </P>
        </section>
        <section class="cao-TV">

        </section>
        <footer>
            <div class="cao-line">
                <hr size="3px" color="#ff5c38">
            </div>
            <div class="cao-footer">
                <div class="cao-links1">
                    <dl>
                        <dt>特色推荐</dt>
                        <dd><a href="#">自制推荐</a></dd>
                        <dd><a href="#">杀毒软件</a></dd>
                    </dl>
                </div>
                <div class="cao-links2">
                    <h4>软件下载</h4>
                    <div class="cao-icon">
                        <a href="https://v.qq.com/biu/download#iPhone">
                            <span class="iconfont icon-mobile"></span>
                            <p>手机版</p>
                        </a>
                    </div>
                    <div class="cao-icon">
                        <a href="https://v.qq.com/biu/download#Windows">
                            <span class="iconfont icon-windows"></span>
                            <p>Windows 版</p>
                        </a>
                    </div>
                    <div class="cao-icon">
                        <a href="https://v.qq.com/biu/download#Mac">
                            <span class="iconfont icon-mac"></span>
                            <p>Mac 版</p>
                        </a>
                    </div>
                    <div class="cao-icon">
                        <a href="https://v.qq.com/biu/download#Pad">
                            <span class="iconfont icon-ipad1"></span>
                            <p>iPad 版</p>
                        </a>
                    </div>
                    <div class="cao-icon">
                        <a href="https://v.qq.com/biu/download#TV">
                            <span class="iconfont icon-diannaoduan"></span>
                            <p>TV 版</p>
                        </a>
                    </div>
                </div>
                <div class="cao-links3">
                    <dl>
                        <dt>服务</dt>
                        <dd><a href="#">客服</a></dd>
                        <dd><a href="#">反馈</a></dd>
                        <dd><a href="#">侵权投诉</a></dd>
                        <dd><a href="#">免广告合作</a></dd>
                        <dd><a href="#">vip 采购</a></dd>
                    </dl>
                </div>
            </div>
            
            <div class="cao-speak">
                <p>粤网文[2017]6138 - 1456 号 | 网络视听许可证 1904073 号 | 增值电信业务经营许可证:粤 B2 - 20090059 | 粤公网安备 44030002000001 号</p>
                <p>关于腾讯 | About Tencent | 服务条款 | 广告服务 | 腾讯招聘 | 客服中心 | 网站导航</p>
                <p>Copyright © 1998 - 2024 Tencent. All Rights Reserved.</p>
                <p>腾讯公司 版权所有</p>
            </div>

        </footer>
    </article>
    <script>

        const expandTrigger = document.querySelector('.cao-expand-trigger');
        const hiddenSections = document.querySelectorAll('.cao-hidden-sections');

        expandTrigger.addEventListener('click', function () {
            // 切换隐藏部分的显示状态
            hiddenSections.forEach(section => {
                section.style.display = section.style.display === 'block'? 'none' : 'block';
            });
            // 切换展开字样的文本
            this.textContent = this.textContent === '收起'? '展开' : '收起';
        });

        const data = [
            {
                img: 'image/1.png',
                name: '九重紫',
                actor: '孟子义 李钧锐 孔雪儿',
                score: '9.5',
                date: '2024',
                label: '独播'
            },
            {
                img: 'image/猎罪.jpg',
                name: '猎罪图鉴2',
                actor: '檀健次 金世佳 张柏嘉',
                score: '9.7',
                date: '2024',
                label: 'VIP'
            },
            {
                img: 'image/7.png',
                name: '黑白森林',
                actor: '丁禹兮 宁理 韩雪',
                score: '9.5',
                date: '2024',
                label: '独播'
            },
            {
                img: 'image/8.png',
                name: '太阳星辰[普通话版]',
                actor: '陈伟霆 刘雅瑟 冯德伦',
                score: '9.0',
                date: '2024',
                label: '结局'
            },
        ];
        let s = '';
        for (let item of data) {
            s = s + `
            <a href="#" class="${item.name === '黑白森林'? 'black-white-forest-link' : ''}">
                <img src="${item.img}">
                <span>${item.name}</span>
                <span class="cao-name">${item.actor}</span>
                <span class="cao-assess">评分${item.score}</span>
                <div class="cao-top">
                    <p>${item.date}</p>
                    <p class="cao-unique">${item.label}</p>
                </div>
            </a>
            `;
        }
        const tv = document.querySelector('.cao-TV');
        tv.innerHTML = s;

        const blackWhiteForestLink = document.querySelector('.black-white-forest-link');
        if (blackWhiteForestLink) {
            blackWhiteForestLink.addEventListener('click', function (event) {
                event.preventDefault();
                window.location.href = 'yongyexinghe.html';
            });
        }
    </script>
</body>

</html>